<template>
  <div>
    <div class="block">
      <span class="demonstration">订单日期：</span>
      <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
    </div>
    <div id="area">
      <span>请选择省：</span>
      <el-select v-model="province" placeholder="全部省份" @change="renderCity">
        <el-option
          v-for="item in provinceListAll"
          :key="item.adcode"
          :label="item.name"
          :value="item.name"
        >
          <span style="float: left">{{ item.name }}</span>
        </el-option>
      </el-select>
      <span>请选择市：</span>
      <el-select v-model="city" placeholder="全部市" @change="renderDistrict">
        <el-option
          v-for="item in cityListAll"
          :key="item.citycode"
          :label="item.name"
          :value="item.name"
        >
          <span style="float: left">{{ item.name }}</span>
        </el-option>
      </el-select>
      <span>请选择区：</span>
      <el-select v-model="district" placeholder="全部区">
        <el-option
          v-for="item in districtAll"
          :key="item.value"
          :label="item.name"
          :value="item.name"
        >
          <span style="float: left">{{ item.name }}</span>
        </el-option>
      </el-select>
      <el-button type="info" plain id="btn" @click="select" :disabled="option"
        >筛选</el-button
      >
    </div>
    <div class="num">
      <el-card class="box-card" shadow="hover">
        <div class="text item">
          <h4>成交用户数量</h4>
          <br />
          <span>{{ per }}人</span>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div class="text item">
          <h4>用户注册统计</h4>
          <br />
          <span>{{ num }}人</span>
        </div>
      </el-card>
      <el-card class="box-card" shadow="hover">
        <div class="text item">
          <h4>销售统计</h4>
          <br />
          <span>{{ sum }}张</span>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      option: true,
      per: "0",
      num: "0",
      sum: "0",
      arr: [
        { per: 9, num: 4, sum: 12 },
        { per: 8, num: 1, sum: 5 },
        { per: 5, num: 2, sum: 7 },
        { per: 4, num: 3, sum: 47 },
        { per: 2, num: 1, sum: 2 },
        { per: 8, num: 2, sum: 9 },
        { per: 1, num: 7, sum: 12 },
        { per: 1, num: 6, sum: 8 },
        { per: 2, num: 5, sum: 7 },
        { per: 6, num: 2, sum: 12 },
      ],
      district: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      // value1: "",
      // value2: "",
      province: "",
      city: "",
      provinceListAll: [],
      cityListAll: [],
      districtAll: [],
    };
  },
  methods: {
    renderCity() {
      if (this.province.length > 0) {
        this.cityListAll = this.provinceListAll.filter(
          (item) => item.name == this.province
        )[0].districts;
        // console.log(this.cityListAll);
        //  this.district = this.cityListAll.filter(item => item.name == this.city)[0].districts;
        //  this.citySelectAble = true;
      }
    },
    renderDistrict() {
      if (this.city.length > 0) {
        this.option = false;
        this.districtAll = this.cityListAll.filter(
          (item) => item.name == this.city
        )[0].districts;
      }
    },
    select() {
      this.per = this.arr[Math.floor(Math.random() * 10)].per;
      this.num = this.arr[Math.floor(Math.random() * 10)].num;
      this.sum = this.arr[Math.floor(Math.random() * 10)].sum;
    },
  },
  watch: {
    // watch 监听 merchant.province，当城市选择后，再次换省份时，能清空已选择的城市
    province: function (newValue, oldValue) {
      this.city = "";
    },
  },

  beforeCreate() {
    // 获取全国所有省份和城市的列表
    var that = this;
    this.axios
      .get("https://restapi.amap.com/v3/config/district?", {
        // 高德地图的API
        params: {
          key: "85084987d752272c6cb0c3fdaeedbb97", // 这个是申请的 Key，读者自行写入
          keywords: "中国",
          subdistrict: 3,
          extensions: "base",
        },
      })
      .then((response) => {
        // console.log(response);
        that.provinceListAll = response.data.districts[0].districts;
        for (let i = 0; i < response.data.districts[0].districts.length; i++) {
          for (
            let j = 0;
            j < response.data.districts[0].districts[i].districts.length;
            j++
          ) {
            that.cityListAll.push(
              response.data.districts[0].districts[i].districts[j]
            );
            // console.log(response.data.districts[0].districts[i].districts[j].districts);
            for (
              let m = 0;
              m <
              response.data.districts[0].districts[i].districts[j].districts
                .length;
              m++
            ) {
              that.districtAll.push(
                response.data.districts[0].districts[i].districts[j].districts[
                  m
                ]
              );
            }
          }
        }
        // console.log("省份", that.provinceListAll);
        // console.log("城市", that.cityListAll);
        // console.log("区", that.districtAll);
        localStorage.setItem(
          "aaa",
          JSON.stringify({
            provinceListAll: this.provinceListAll,
            cityListAll: this.cityListAll,
            districtAll: this.districtAll,
          })
        );
      });
    // EventBus.$emit('addition',{
    //   provinceListAll:this.provinceListAll,
    //   cityListAll:this.cityListAll,
    //   districtAll:this.districtAll
    // })
  },
};
</script>
<style scoped>
* {
  text-align: left;
  padding: 0;
  margin: 0;
}
.text {
  font-size: 14px;
}

.item {
  padding: 5px 0;
}

.box-card {
  width: 200px;
  display: inline-block;
  margin: 10px;
}
.text span {
  margin: 5px;
}
.block {
  margin: 30px;
  width: 725px;
}
#area {
  margin-left: 15px;
  display: flex;
  height: 40px;
  align-items: center;
}
#btn {
  appearance: auto;
  height: 40px;
  text-rendering: auto;
  color: -internal-light-dark(black, white);
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  align-items: flex-start;
  cursor: default;
  background-color: -internal-light-dark(rgb(239, 239, 239), rgb(59, 59, 59));
  box-sizing: border-box;
  margin: 0em;
  font: 400 13.3333px Arial;
  border-width: 2px;
  border-style: outset;
  border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
  border-image: initial;
  border-radius: 2px;
}
</style>